<template>
  <div class="cleanliness-score-card">
    <div class="card-header">
      <div class="icon">
        <img :src="iconPath" :alt="`${headerTitle} icon`" />
      </div>
      <div class="title">{{ title }}</div>
    </div>
    <div class="chart-container">
      <div></div>
      <PieChart :option="pieChartOptions" style="height: 165px"></PieChart>
    </div>
    <div></div>
  </div>
</template>

<script>
import PieChart from "@components/common/PieChart.vue";
import defaultIcon from "@/assets/pieIcon/bigbed.png";

export default {
  components: {
    PieChart,
  },
  props: {
    headerTitle: String,
    iconPath: {
      type: String,
      default: defaultIcon,
    },
    showScoreRange: {
      type: Boolean,
      default: false,
    },
    showLegend: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      Cleanness: "",
      pieChartOptions: {
        tooltip: {
          trigger: "item",
          formatter: "{b}: {c} ({d}%)",
        },
        legend: {
          show: this.showLegend, // 这里的 this.showLegend 在 data 中使用时，会在组件实例化后正确解析
          orient: "vertical",
          right: "0",
          bottom: "0%",
          itemHeight: 8,
          data: [
            { name: "check in", icon: "circle" },
            { name: "check out", icon: "circle" },
          ],
          itemGap: 1,
          textStyle: {
            padding: [0, 0, 5],
            fontSize: 10,
          },
        },
        graphic: {
          type: "text",
          left: "center",
          top: "center",
          style: {
            text: "50%",
            textAlign: "center",
            fill: "#000",
            fontSize: 14,
            fontWeight: "bold",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            top: "10%",
            left: "10%",
            right: "10%",
            bottom: "10%",
            radius: ["70%", "100%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            padAngle: 5,
            itemStyle: {
              borderRadius: 15,
              borderColor: "#fff",
              borderWidth: 10,
            },
            label: {
              show: true,
              formatter: " {d}%",
              position: "outside",
              padding: [0, -30],
            },
            labelLine: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            data: [
              { value: 300, itemStyle: { color: "#CE4049" }, name: "数据项1" },
              { value: 300, itemStyle: { color: "#EFB82C" }, name: "数据项2" },
              {
                value: 600,
                itemStyle: { color: "#2FAA68" },
                name: "Positive Reviews",
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    goDetails(headerTitle) {
      this.$emit("clickTitle", headerTitle);
      console.log("点击了小眼睛");
    },
  },
};
</script>

<style scoped lang="scss">
.cleanliness-score-card {
  padding-top: 24px;
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #dbdbdb;

  background: #fff;
  border-radius: 16px;
  .card-header {
    display: flex;
    align-items: center;
    .icon {
      margin-right: 8px;
    }
  }
  .chart-container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
